<template>
  <div :id="chartId" style="width: 100%;height: 100%;"></div>
</template>
<script>
export default {
  mounted() {
    this._initCharts()
  },
  props: {
    data: {
        type: Array,
        required: true
    },
    chartId: {
        type: String,
        required:true
    }
  },
  watch: {
      data(newv) {
          this._initCharts()
      }
  },
  methods: {
    _initCharts () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById(this.chartId))
      
      let data = this.data;


      const  colorList=['#52D1BE', '#5E52CD', '#C17C52'];
      const option = {
          legend: {
            //   show:false,
              orient: 'horizontal',
              icon: 'react',
            //   bottom : this.$options.filters.fontSize(0.3),
              width: '40%',
              left: '60%',
              top: '20%',
              itemGap : this.$options.filters.fontSize(0.1),
              itemHeight: this.$options.filters.fontSize(0.06),
              itemWidth: this.$options.filters.fontSize(0.14),
              textStyle: {
                  fontSize: this.$options.filters.fontSize(0.16),
                  color: "#fff"
              }
              
          },
          tooltip: {
              trigger: 'item',
              formatter: '{b} : {c} ({d}%)',
              textStyle: {
                  fontSize: this.$options.filters.fontSize(0.16),
              }
          },
          series: [
              // 主要展示层的
              {
                  radius: ['35%', '75%'],
                  center: ['30%', '50%'],
                  type: 'pie',
                  itemStyle: {
                      normal: {
                          color: function(params) {
                              return colorList[params.dataIndex]
                          }
                      }
                  },
                  label:{
                      show: false,
                      normal:{
                          color: 'transparent',
                          position: 'outside' ,
                        //   formatter: '{b}\n{d}%',
                          fontSize: this.$options.filters.fontSize(0.16)
                      }
                  },
                  labelLine: {
                      normal:{
                          length: this.$options.filters.fontSize(0.08),
                          length2:this.$options.filters.fontSize(0.08),
                          lineStyle: {
                              width: 0
                          }
                      }  
                  },
                  data: data
              }
          ]
      };

      // 绘制图表
      myChart.setOption(option)
      
      
    }

  }
  
}
</script>
<style lang="scss" scoped>
.charts_container {
  width: 100%;
  height: 305px;
  margin-right: 19px;
  position: relative;
  box-sizing: border-box;
}
</style>